<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title + ' · 合集'"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 主题合集对应的回答列表 -->
    <SectionList :SectionList="SectionList" @moreSection="getMoreSection"/>
  </div>
</template>

<script>
import { getSectionList, getSectionBefore } from '@/api'
import { onBeforeMount, provide, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SectionList from '@/components/SectionList'
export default {
  name: 'Section',
  components: { SectionList },
  setup() {
    const $route = useRoute()
    const $router = useRouter()

    const state = reactive({
      id: $route.params.id,
      SectionList: [], // 合集回答列表
      title: '', // 合集名称
      timestamp: '', // 时间戳,用于获取以为的合集
    })

    onBeforeMount(async () => {
      const res = await getSectionList(state.id)
      state.title = res.data.name
      state.timestamp = res.data.timestamp
      state.SectionList = [...res.data.stories]
    })

    const getMoreSection = async () => {
      const res = await getSectionBefore(state.id, state.timestamp)
      state.timestamp = res.data.timestamp // 更新时间戳
      state.SectionList = [...state.SectionList, ...res.data.stories]
    }


    return {
      ...toRefs(state),
      $router,
      getMoreSection
    }
  },
}
</script>

<style scoped>
</style>